<template>
    <div>
      <div id="head">
        <van-icon class="biao" size="25px" @click="toHead()" name="arrow-left"
                  style="position: absolute;left: 10px;" />
        区域分析
      </div>
      <div style="margin-top: 10px; padding: 10px;">
        <div style="position:absolute;top: 60px;left: 30px">
          <van-button
              v-for="(item, index) in buttons"
              :key="index"
              :type="activeIndex === index? 'info' : 'default'"
              @click="handleClick(index)"
              v-model="form.energyType">
            {{item}}
          </van-button>
        </div>
        <div  style="position: absolute;top:105px;left: 15px;width: 150px;height: 30px;">
          <span style="color: blue;font-weight: bold;font-size: 18px">|</span>
          各区域用能统计
        </div>
        <div  style="position: absolute;top:640px;left: 15px;width: 150px;height: 30px;">
          <span style="color: blue;font-weight: bold;font-size: 18px">|</span>
          各区域用能排行
        </div>
        <div  style="position: absolute;top: 1000px;left: 20px;">
          <span style="color: blue;font-weight: bold;font-size: 18px">|</span>
          各区域用能占比
        </div>
        <div  style="position: absolute;top: 1420px;left: 20px">
          <span style="color: blue;font-weight: bold;font-size: 18px">|</span>
          各区域分项用能统计
        </div>
      </div>
      <div style="border: #2c3e50 2px solid;width: 340px; margin-left: 20px;border-radius: 20%">
        <van-cell title="选择日期" :value="form.queryTime" @click="show = true" />
        <van-calendar v-model="show" :min-date="minSelectedDate" @confirm="onConfirm" />
      </div>

      <div style="display: flex;justify-content: left;padding-left: 30px;padding-top: 20px">
        <van-button
            v-for="(item2, index2) in buttons2"
            :key="index2"
            :type="activeIndex2 === index2? 'info' : 'default'"
            @click="handleClick2(index2)"
            v-model="form.meteringType"
            size="small">
          {{item2}}
        </van-button>
      </div>

      <div ref="echartsRef" style="width: 360px; height: 400px;"></div>

      <div ref="echartsRef2" style="width: 360px; height: 400px;"></div>

      <div ref="echartsRef3" style="width: 360px; height: 430px;"></div>

      <div style="border: #2c3e50 1px solid;width: 340px; margin-left: 20px;">
        <van-cell title="选择日期" :value="pojo.queryTime"  @click="show2 = true"  />
        <van-calendar v-model="show2" :min-date="minSelectedDate" @confirm="onConfirm2" />
      </div>

      <div ref="echartsRef4" style="width: 360px; height: 430px;"></div>
    </div>
</template>
<script>
  import * as echarts from "echarts";
  import axios from "axios";
  export default {
    data(){
      return{
        form:{
          energyType:"电",
          meteringType:"总量",
          queryTime:"2024-11-25"
        },
        pojo:{
          queryTime:"2024-11-25"
        },
        buttons: ['电', '水', '燃气'],
        buttons2: ['总量', '单平方'],
        activeIndex: 0,
        activeIndex2: 0,
        show: false,
        show2: false,
        minSelectedDate: new Date('2024-10-01'),
        regionUsage:[100,200,300,400,500,600],
        annularChart:[
          { value: 1048, name: '区域A' },
          { value: 735, name: '区域B' },
          { value: 580, name: '区域C' },
          { value: 484, name: '区域D' },
          { value: 484, name: '区域E' },
          { value: 345, name: '区域F' },
        ],
        joint:["区域A","区域B","区域C","区域D","区域E","区域F"],
        lightingUsage:[120, 132, 101, 134, 90, 230, 210,123,456,789,147,369],
        conditioningUsage:[220, 182, 191, 234, 290, 330, 310,123,456,789,147,369],
        powerUsage:[150, 232, 201, 154, 190, 330, 410,123,456,789,147,369],
        specialUsage:[150, 232, 201, 154, 190, 330, 410,123,456,789,147,369],
      }
    },
    methods:{
      findSpecialUsage(){
        this.pojo.energyType = this.form.energyType;
        axios.post("http://localhost:9999/itemizeUsage/findSpecialUsage",this.pojo).then(res=>{
          this.specialUsage = [];
          this.specialUsage = res.data;
          this.initChart4()
        })
      },
      findPowerUsage(){
        this.pojo.energyType = this.form.energyType;
        axios.post("http://localhost:9999/itemizeUsage/findPowerUsage",this.pojo).then(res=>{
          this.powerUsage = [];
          this.powerUsage = res.data;
          this.initChart4()
        })
      },
      findConditioningUsage(){
        this.pojo.energyType = this.form.energyType;
        axios.post("http://localhost:9999/itemizeUsage/findConditioningUsage",this.pojo).then(res=>{
          this.conditioningUsage = [];
          this.conditioningUsage = res.data;
          this.initChart4()
        })
      },
      findLightingUsage(){
        this.pojo.energyType = this.form.energyType;
        axios.post("http://localhost:9999/itemizeUsage/findLightingUsage",this.pojo).then(res=>{
          this.lightingUsage = [];
          this.lightingUsage = res.data;
          this.initChart4()
        })
      },
      findItemizeUsage(){
        this.findLightingUsage();
        this.findConditioningUsage();
        this.findPowerUsage();
        this.findSpecialUsage();
      },
      onConfirm2(date) {
        this.show2 = false;
        this.pojo.queryTime = this.formatDate2(date);
        this.findItemizeUsage();
      },
      formatDate2(date) {
        return `${date.getYear()+1900}-${date.getMonth() + 1}-${date.getDate()}`;
      },
      findAnnularChart(){
        axios.post("http://localhost:9999/regionUsage/findAnnularChart",this.form).then(res=>{
          this.annularChart = [];
          this.annularChart = res.data;
          this.initChart3()
        })
      },
      findRegionUsageList(){
        axios.post("http://localhost:9999/regionUsage/findRegionUsage",this.form).then(res=>{
          this.regionUsage = [];
          this.regionUsage = res.data;
          this.initChart();
          this.initChart2()
        })
      },
      formatDate(date) {
        return `${date.getYear()+1900}-${date.getMonth() + 1}-${date.getDate()}`;
      },
      onConfirm(date) {
        this.show = false;
        this.form.queryTime = this.formatDate(date);
        this.findPage();
      },
      handleClick2(index2) {
        this.activeIndex2 = index2;
        this.form.meteringType = this.buttons2[index2];
        this.findPage();
      },
      handleClick(index) {
        this.activeIndex = index;
        this.form.energyType = this.buttons[index];
        this.findPage();
      },
      findPage(){
        this.findRegionUsageList();
        this.findAnnularChart();
        this.findItemizeUsage();
        this.initChart();
        this.initChart2();
        this.initChart3();
        this.initChart4();
      },
      toHead() {
        this.$router.push('/overview')
      },
      /*
       各区域用能统计
       */
      initChart() {
        const chartDom = this.$refs.echartsRef;
        const myChart = echarts.init(chartDom);
        // 配置图表选项
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['区域A', '区域B', '区域C', '区域D', '区域E', '区域F'],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: 'Direct',
              type: 'bar',
              barWidth: '60%',
              data: this.regionUsage,
            }
          ]
        };
        myChart.setOption(option);
      },
      /*
       各区域用能排行
       */
      initChart2() {
        const chartDom = this.$refs.echartsRef2;
        const myChart = echarts.init(chartDom);
        // 配置图表选项
        const option = {
          xAxis: {
            max: 'dataMax'
          },
          yAxis: {
            type: 'category',
            data: ['区域A', '区域B', '区域C', '区域D', '区域E','区域F'],
            inverse: true,
            animationDuration: 300,
            animationDurationUpdate: 300,
          },
          series: [
            {
              realtimeSort: true,
              name: 'X',
              type: 'bar',
              data: this.regionUsage,
              label: {
                show: true,
                position: 'right',
                valueAnimation: true
              }
            }
          ],
          animationDuration: 0,
          animationDurationUpdate: 3000,
          animationEasing: 'linear',
          animationEasingUpdate: 'linear'
        };
        myChart.setOption(option);
      },
      /*
       各区域用能占比
       */
      initChart3() {
        const chartDom = this.$refs.echartsRef3;
        const myChart = echarts.init(chartDom);
        // 配置图表选项
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '耗能',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              labelLine: {
                show: true
              },
              data:this.annularChart,
            }
          ]
        };
        myChart.setOption(option);
      },
      /*
       各区域分项用能统计
       */
      initChart4() {
        const chartDom = this.$refs.echartsRef4;
        const myChart = echarts.init(chartDom);
        // 配置图表选项
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: this.joint,
              axisLabel: {
                interval: 0 // 设置interval为0，表示全部显示
              }
            },
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '照明耗能',
              type: 'bar',
              stack: 'Ad',
              emphasis: {
                focus: 'series'
              },
              data: this.lightingUsage,
            },
            {
              name: '空调耗能',
              type: 'bar',
              stack: 'Ad',
              emphasis: {
                focus: 'series'
              },
              data: this.conditioningUsage,
            },
            {
              name: '动力耗能',
              type: 'bar',
              stack: 'Ad',
              emphasis: {
                focus: 'series'
              },
              data: this.powerUsage,
            },
            {
              name: '特殊耗能',
              type: 'bar',
              stack: 'Ad',
              emphasis: {
                focus: 'series'
              },
              data: this.specialUsage,
            },
          ]
        };
        myChart.setOption(option);
      },
    },
    created(){

    },
    mounted(){
      this.findPage();
    }
  }
</script>
<style scoped>
#head{
  background-color: #f5f5f5;
  height: 30px;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 70px;
}
</style>
